<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind属性绑定</title>
    <style>
        .active{
            color: red;
        }
        .border{
            border: 5px solid blue;
        }
        .bigsize{
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        
<img :src="src" alt="">
<a :href="href">百度一下</a>
<h1 :class="active">v-bind:class</h1>
<h1 class="bigsize" :class="{active:isActive,border:isBorder}">v-bind:class对象</h1>
<button @click="changecolor">改变颜色</button>
<h1 class="bigsize" :class="getclass()">v-bind:class对象</h1>


<h1 :class="['active','border']">v-bind:class数组</h1>
<h1 :class="[active1,border1]">v-bind:class数组</h1>
<h1 :class="getclasses()">v-bind:class数组</h1>

<ul>
    <li :class="{active:index===indexx}" @click='dianji(index)' v-for="(item,index) in movies">{{index}}-{{item}}</li>
</ul>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                src:"http://img3.imgtn.bdimg.com/it/u=3381573685,1866477444&fm=26&gp=0.jpg",
                href:"http://www.baidu.com",
                message:"你好",
                active1:'active',
                border1:'border',
                isActive:true,
                isBorder:true,
                movies:['海贼王','火影忍者','柯南'],
                indexx:0
                
                

            },
            methods: {
                changecolor(){
                    this.isActive=!this.isActive
                },
                getclass(){
                    return {active:this.isActive,border:this.isBorder}
                },
                getclasses(){
                    return [this.active1,this.border1]
                },
                dianji(index){
                    console.log(index)
                    this.indexx=index
                }
            },
        })

    </script>
</body>

</html>